<template>
  <div>
    <h3>parent ---{{ count }} --- parent</h3>
    <p>
      <input type="text" v-model="txt" />
    </p>
    <button @click="changechildone">点击修改childone</button>

    <hr />

<!-- 第一个是通过 v-model 实现双向绑定的 父改子 -->
<!-- 第二个是通过 ref 绑定子组件  然后子组件规定修改自身的方法后  父组件调用这个方法 -->
    <childone :txt="txt" ref="one">

      <p>这是去替换匿名插槽的内容</p>

      <template v-slot:menu>
        <div>
          <p>这是menu的具名插槽的内容</p>
        </div>
      </template>
    </childone>

    <br />

    <!-- 父组件监听  并通过方法接收传来的参数 -->
    <!-- 父组件把修改自身的方法传递给子组件 -->
    <childtwo
      @changesome="getNewWord"
      :changeCount="changeCount"
      v-model="txt"
    ></childtwo>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      txt: "敲不动了啊~  不动了啊~  动了啊~  了啊~  啊~",
      count: 1000,
    };
  },
  methods: {
    changeCount(count) {
      //父组件规定改变自身的方法
      this.count += count;
    },
    changechildone() {
      //   this.$refs.one.show = !this.$refs.one.show;
      this.$refs.one.changeshow(); // 调用子组件的方法
    },
    getNewWord(playload) {
      this.txt = playload;
    },
  },
};
</script>